<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form>
			<input type="text" name="account" placeholder="请输入账号" />
			<input type="password" name="password" placeholder="请输入密码" value="123" />
			<br />
			<span>性别</span>
			<input type="radio" name="gender" value="0" /> 女
			<input type="radio" name="gender" value="1" checked /> 男
			<br />
			<span>喜欢颜色</span>
			<input type="radio" name="color" value="0" checked /> 红
			<input type="radio" name="color" value="1" /> 绿
			<input type="radio" name="color" value="2" /> 蓝
			<br />
			<span>爱好</span>
			<input type="checkbox" name="interest" value="0" /> 打游戏
			<input type="checkbox" name="interest" value="1" /> 打篮球
			<input type="checkbox" name="interest" value="2" checked /> 写代码
			<br />
			<span>地址</span>
			<select id="select_sheng">
				<option value="-1">请选择省</option>
				<!-- <option value="1">广西省</option>
				<option value="2">广东省</option> -->
			</select>
			<select id="select_shi">
				<option value="-1">请选择市</option>
				<!-- <option value="1">柳州市</option>
				<option value="2">南宁市</option> -->
			</select>
			<select>
				<option value="-1">请选择区</option>
				<option value="1">城东区</option>
				<option value="2">A区</option>
			</select>
			<br />
			<span>街道地址</span>
			<input type="text" name="account" placeholder="请输入街道地址" />
			<br />
			<span>头像</span>
			<input type="file" />
			<br />
			<span>生日</span>
			<input type="date" />
			<br />
			<textarea rows="10" cols="50">此处省略一万字</textarea>
			<br />
			<input type="submit" value="注册" />
			<button type="reset">重置</button>
			<button type="button" onclick="click1()">普通按钮</button>
			<button>submit按钮</button>
		</form>
		<script type="text/javascript">
			let sheng = [{
				id: "1",
				name: "广西"
			}, {
				id: "2",
				name: "广东"
			}, {
				id: "3",
				name: "湖南"
			}];
			//将sheng数组中的内容，以option的形式动态的添加到select标签中
			//添加一个市的数组，但是要求选择不同省，市中的内容会变化
			// let obj = {};创建一个对象，只不过没有属性
			let city = [{
				id: "1",
				name: "柳州",
				parent: "1"
			}, {
				id: "2",
				name: "南宁",
				parent: "1"
			}, {
				id: "3",
				name: "广州",
				parent: "2"
			}, {
				id: "4",
				name: "深圳",
				parent: "2"
			}];
			let select_sheng = document.getElementById("select_sheng");
			let select_shi = document.getElementById("select_shi");
			//默认选择中第2条数据
			// select_sheng.selectedIndex = 1;//通过索引，设置默认选择的option
			//添加选项
			for (let item of sheng) {
				let op = document.createElement("option"); //创建一个option标签
				op.value = item.id;
				op.textContent = item.name;
				select_sheng.add(op);
			}

			//监听省的变动
			select_sheng.onchange = function() {
				//打印当前选中内容
				// console.log(select_sheng.children);
				//获取选中的option
				let selectedOption;
				for (let item of select_sheng.children) {
					// console.log(item.selected);
					if (item.selected) {
						selectedOption = item;
					}
				}
				console.log(selectedOption);
				//删除市中的option
				for (let index in select_shi.children) {
					// console.log(item.selected);
					select_shi.remove(index);
				}
				//添加请选择这个option
				let op = document.createElement("option");
				op.value = "-1";
				op.textContent = "请选择城市";
				select_shi.add(op);
				//城市标签内容
				for (let item of city) {
					if (selectedOption.value === item.parent) {
						op = document.createElement("option"); //创建一个option标签
						op.value = item.id;
						op.textContent = item.name;
						select_shi.add(op);
					}
				}
			}

			function click1() {
				let radio_gender = document.getElementsByName("gender");
				console.log(radio_gender);
				let checked_gender; //被选中的性别标签
				for (let item of radio_gender) {
					if (item.checked) {
						checked_gender = item;
					}
				}
				console.log("您当前选中的性别值是：" + checked_gender.value);

			}
		</script>
	</body>
</html>
